<template>
  <div class="split-pane-page-wrapper">
    
    <split-pane v-model="offset" @on-moving="handleMoving">
      <div slot="left" class="pane left-pane">
          <el-input type="textarea"
            :rows="2"
            placeholder="请输入原文"
            v-model="content1" 
            :autosize="{ minRows: 19, maxRows: 19}"
            maxlength="500"
            :clearable="true"
            remark=""
            >
        </el-input>
        <i v-show="clearable && content1" class="clearButton el-input__icon el-icon-circle-close el-input__clear" @click.prevent="content1=''"></i>
          <el-button size="small" type="primary" @click = "startAnalysis">点击解析</el-button>

      </div>
      <div slot="right" class="pane right-pane">
        <el-input type="textarea"
            :rows="2"
            placeholder="等待解析..."
            :autosize="{ minRows: 19, maxRows: 19}"
            :value="content2"
            
            >
        </el-input>
        <i class="el-icon-tickets" @click="copyText" id="copybuttons"></i>
      </div>
    </split-pane>
  </div>
</template>

<script>
import MarkdownEditor from "../../components/tui-editor";
import SplitPane from '_c/split-pane'
import Icons from '_c/icons'
import {
  analysisText
} from '@/api/user'
import Clipboard from 'clipboard';
export default {
  name: 'home',
  components: {
    SplitPane,
    Icons,
    MarkdownEditor
  },
  data () {
    return {
      offset: 0.5,
      content1:"",
      content2:"",
      clearable:true
    }
  },
  methods: {
    handleMoving (e) {
      // console.log(e.atMin, e.atMax)
    },
    startAnalysis(){
      let that = this
      let text = that.content1
      analysisText({text}).then(res=>{
        if(res.data.status =="success"){
          that.content2 = res.data.text
          this.$message.success("解析成功！")
        }else{
          this.$error.success("解析失败！")
        }
      })
    },
    copyText(){
      var _this = this;
      var clipboard = new Clipboard('#copybuttons',{
        text: () => this.content2
      });
      clipboard.on('success', e => {
        this.$message.success("复制成功！")
            clipboard.destroy()
            })
      clipboard.on('error', e => {
          this.$message.error("复制失败！")
          clipboard.destroy()
        })
        }
  }
}
</script>

<style lang="less" scoped>
.center-middle{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.split-pane-page-wrapper{
  height: 410px;
  .pane{
    width: 100%;
    height: 100%;
    &.left-pane{
      background: white;
    }
    &.right-pane{
      background: white;
    }
    &.top-pane{
      background: white;
    }
    &.bottom-pane{
      background: white;
    }
  }
  .custom-trigger{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000000;
    position: absolute;
    .center-middle;
    box-shadow: 0 0 6px 0 rgba(28, 36, 56, 0.4);
    i.trigger-icon{
      .center-middle;
    }
  }

 
  }
  .clearButton {
      position: absolute;
      border-radius: 5px;
      right: 3px;
      z-index: 2;
      border: none;
      top: -3px;
      height: 40px;
      cursor: pointer;
      color: #ccc;
      transform: translateX(2px);
      font-size: 20px
    }
 
    .clearButton:hover {
      color: #878d99;

    }
  .el-icon-tickets{
    position: absolute;
    left: 18px;
    bottom: 4px;
    font-size: 20px;
    cursor: pointer;
  }
  .el-icon-tickets:hover {
      color: #1559e2;

    }
</style>
